<template>
    <section class="QuickChangePassword-container">
        <el-dialog
            title="修改密码"
            :visible.sync="isShow"
            :close-on-click-modal="false"
            destroy-on-close
            width="500px"
        >
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <!-- <el-form-item label="旧密码" prop="old_password">
                    <el-input
                        type="password"
                        v-model="ruleForm.old_password"
                        autocomplete="off"
                    ></el-input>
                </el-form-item> -->
                <el-form-item label="密码" prop="password">
                    <el-input
                        type="password"
                        v-model="ruleForm.password"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input
                        type="password"
                        v-model="ruleForm.checkPass"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
</template>

<script>
import api from "@/common/api/user";
import _cryptojs from "crypto-js";
export default {
    data() {
        // var validatePass = (rule, value, callback) => {
        //     if (value === "") {
        //         callback(new Error("请输入密码"));
        //     } else {
        //         if (this.ruleForm.checkPass !== "") {
        //             this.$refs.ruleForm.validateField("checkPass");
        //         }
        //         callback();
        //     }
        // };

        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

        return {
            isShow: false,
            ruleForm: {
                user_id: "",
                password: "",
                checkPass: "",
            },
            rules: {
                password: [{ validator: validatePass2, trigger: "blur" }],
                checkPass: [{ validator: validatePass2, trigger: "blur" }],
            },
        };
    },

    methods: {
        showDialog(id) {
            this.isShow = true;
            this.ruleForm.user_id = id;
        },

        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    try {
                        let form = {
                            user_id: this.ruleForm.user_id,
                            password: this.ruleForm.password,
                        };
                        form.password = _cryptojs.MD5(form.password).toString();
                        const result = await api.changePassWordAsync(form);
                        if (+result.rescode == 0) {
                            this.$message({
                                type: "success",
                                message: "修改密码成功!",
                            });
                            this.isShow = false;
                            this.$refs.ruleForm.resetFields();
                            sessionStorage.clear();
                            this.$router.replace("/login");
                        }
                    } catch (error) {}
                } else {
                    return false;
                }
            });
        },

        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style lang="scss" scoped>
.QuickChangePassword-container {
    ::v-deep .el-dialog__body {
        padding: 30px 30px 30px 0;
        color: #606266;
        font-size: 14px;
        word-break: break-all;
    }
}
</style>
